<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>快速注册</title>
	<link rel="stylesheet" href="./css/base.css" type="text/css">
	<link rel="stylesheet" href="./css/global.css" type="text/css">
	<link rel="stylesheet" href="./css/header.css" type="text/css">
	<link rel="stylesheet" href="./css/login.css" type="text/css">
	<link rel="stylesheet" href="./css/footer.css" type="text/css">
	<link rel="stylesheet" href="./css/regist2.css">
	<script src="./js/jquery-1.8.3.min.js"></script>
	

</head>
<body>
	<!-- 顶部导航 start -->
	<div class="topnav">
		<div class="topnav_bd w990 bc">
			<div class="topnav_left">
				
			</div>
			<div class="topnav_right fr">
				<ul>
					<li>您好，欢迎来到京西！[<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>] </li>
					<li class="line">|</li>
					<li>我的订单</li>
					<li class="line">|</li>
					<li>客户服务</li>

				</ul>
			</div>
		</div>
	</div>
	<!-- 顶部导航 end -->
	
	<div style="clear:both;"></div>

	<!-- 页面头部 start -->
	<div class="header w990 bc mt15">
		<div class="logo w990">
			<h2 class="fl"><a href="index.html"><img src="./imgs/logo.png" alt="京西商城"></a></h2>
		</div>
	</div>
	<!-- 页面头部 end -->
	
	<!-- 登录主体部分start -->
	<div class="login w990 bc mt10 regist">
		<div class="login_hd">
			<h2>快速注册</h2>
			<b></b>
		</div>
		<div class="login_bd">
			<div class="login_form fl">
				<input type="text" autocomplete="off" name="mobile" placeholder="请输入手机号">
				<br>
				<div id="captcha">
					<div id="text">
						行为验证™ 安全组件加载中
					</div>
					<div id="wait" class="show">
						<div class="loading">
							<div class="loading-dot"></div>
							<div class="loading-dot"></div>
							<div class="loading-dot"></div>
							<div class="loading-dot"></div>
						</div>
					</div>
				</div>
				<br>
				<div class="captcha">
					<input type="number" min=4 max=4 autocomplete="off" name="captcha" placeholder="请输入短信验证码">
					<button class="captchaBtn">
						获取验证码
					</button>
				</div>
				<br>
				<input type="text" autocomplete="off "name="pwd "placeholder="请输入登录密码">
				<br>
				<button class="createBtn">
					提交创建
				</button>
			</div>
			<script>
				// 1.给按钮绑定点击事件
				let num=60
				let t 
				$('.captchaBtn').click(function(){
					// 发送短信
					let mobile=$('.login_form input:eq(0)').val()
					$.post('http://kg.zhaodashen.cn/v1/public/sendMsg.jsp',{mobile},res=>{
						if(res.meta.state == 201)
						{
					// 2.事件处理函数中
					// 先直接改成 重新获取(59s)
					// $(this).text('重新获取(59s)')
					// 发现一直是59 然后写定时器定义全局 num--  更改
					// 最后判断优化   当num<1 改成 获取验证码 num恢复到60

					// 解决1：点击之后禁止按钮点击、结束后恢复点击（推荐，提高用户体验度）
					// 解决2：判断t if(t) return  节流
					$(this).attr('disabled','disabled')

					t=setInterval(()=>{
						num--
						if(num < 1)
						{
							$(this).text('获取验证码')
							clearInterval(t)	
							num=60
							$(this).removeAttr('disabled')
						}else{
							$(this).text(`重新获取(${num})`)
						}
						
					},1000)
						}else{
							alert(res.meta.msg)
						}
					},'json')
					// // 2.事件处理函数中
					// // 先直接改成 重新获取(59s)
					// // $(this).text('重新获取(59s)')
					// // 发现一直是59 然后写定时器定义全局 num--  更改
					// // 最后判断优化   当num<1 改成 获取验证码 num恢复到60

					// // 解决1：点击之后禁止按钮点击、结束后恢复点击（推荐，提高用户体验度）
					// // 解决2：判断t if(t) return  节流
					// $(this).attr('disabled','disabled')

					// t=setInterval(()=>{
					// 	num--
					// 	if(num < 1)
					// 	{
					// 		$(this).text('获取验证码')
					// 		clearInterval(t)	
					// 		num=60
					// 		$(this).removeAttr('disabled')
					// 	}else{

					// 	}
					// 	$(this).text(`重新获取(${num})`)
					// },1000)

				})
			</script>
		</div>
	</div>
	<!-- 登录主体部分end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt15">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">京西论坛</a>
		</p>
		<p class="copyright">
			 © 2005-2013 京东网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号 
		</p>
		<p class="auth">
			<a href=""><img src="./imgs/xin.png" alt="" /></a>
			<a href=""><img src="./imgs/kexin.jpg" alt="" /></a>
			<a href=""><img src="./imgs/police.jpg" alt="" /></a>
			<a href=""><img src="./imgs/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->
	<!-- <script src="./js/jquery-1.8.3.min.js"></script> -->
<script>
	// 注册
	// 1.绑定点击事件
	// 2.处理函数中
	//   2.1 阻止表单提交
	//   2.2获取输入数据 过滤
	//   2.3请求接口
	//   2.4失败-提示，成功-提示、跳转登录
	$('.createBtn').click(function(e){
	//   2.1 阻止表单提交
		e.preventDefault()
	//   2.2获取输入数据 过滤
	    let mobile=$('input:eq(0)').val()
		let captcha=$('input').eq(1).val()
		let pwd=$('input').eq(2).val()
	
	//   2.3请求接口
	$.post('http://kg.zhaodashen.cn/v1/public/reg2.jsp',{mobile,pwd,code:captcha},res=>{
		// console.log(res);
		if(res.meta.state==201)
		{
			alert('注册成功，跳转登录...')
			location.href='./login.html'
		}else{
			alert(res.meta.msg)
		}
	},'json')



	//   2.4失败-提示，成功-提示、跳转登录
	})
</script>
</body>
</html>